---
id: bd7157d8c242eddfaeb5bd13
title: Створіть попередній перегляд розмітки
challengeType: 3
forumTopicId: 301372
dashedName: build-a-markdown-previewer
---

# --description--
**Примітка:** **React 18 містить відомі несумісності з тестами цього проєкту (див. [проблему](https://github.com/freeCodeCamp/freeCodeCamp/issues/45922))**

**Мета:** створити застосунок, функціонально схожий до <a href="https://markdown-previewer.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://markdown-previewer.freecodecamp.rocks/</a>.

Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем.

Для виконання цього проєкту можна використати різне поєднання HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery. Потрібно використати фронтенд фреймворк (наприклад, React), оскільки цей розділ стосується їх вивчення. Ми не рекомендуємо використовувати інші технології та ресурси, що не були вказані вище, але ви можете застосовувати їх на власний розсуд. Ми розглядаємо використання інших фронтенд фреймворків, серед яких Angular та Vue, але наразі вони не підтримуються. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Щасливого програмування!

**Історія користувача №1:** я бачу елемент `textarea` з відповідним `id="editor"`.

**Історія користувача №2:** я бачу елемент з відповідним `id="preview"`.

**Історія користувача №3:** коли я ввожу текст в елементі `#editor`, то елемент `#preview` оновлюється та відтворює вміст текстового поля.

**Історія користувача №4:** коли я ввожу розмітку GitHub в елементі `#editor`, то текст відтворюється як HTML в елементі `#preview` (ПІДКАЗКА: вам непотрібно парсити розмітку самостійно — ви можете імпортувати бібліотеку Marked: <https://cdnjs.com/libraries/marked>).

**Історія користувача №5:** коли попередній перегляд розмітки завантажується вперше, то текст в полі `#editor` за замовчуванням міститиме дійсну розмітку, яка представляє принаймні один з цих елементів: заголовок (H1), підзаголовок (H2), посилання, вбудований код, блок коду, елемент списку, цитату, зображення чи жирний текст.

**Історія користувача №6:** коли попередній перегляд розмітки завантажується вперше, то розмітка в полі `#editor` за замовчуванням має відтворитись як HTML в елементі `#preview`.

**Додатково (вам непотрібно робити цього, щоб пройти тест):** попередній перегляд розмітки інтерпретує повернення каретки та відтворює їх як елементи `br` (розрив рядка).

Ви можете створити свій проєкт, <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">використавши цей шаблон CodePen</a> та натиснувши `Save`. Або ж ви можете скористатися цим посиланням CDN, щоб виконати тести в будь-якому середовищі: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами.

# --solutions--

```js
// solution required
```
